// src/app.component.ts
import { AfterViewInit, Component, ElementRef, QueryList, ViewChild, ViewChildren, ReflectiveInjector } from '@angular/core';
import { FormControl, FormGroup, NgForm } from '@angular/forms';
import { TestService } from './test.service';


interface Task {
  person?: {
    name: string
  }
}

interface List {
  id: number
  name: string
  age: number
}
@Component({
  // 指定组件的使用方式，当前为标记形式
  // app-home   => <app-home></app-home?
  // [app-home] => <div app-home></div>
  // .app-home  => <div class="app-home"></div>
  selector: 'app-root',
  // 关联组件模板文件
  // templateUrl: '组件模板文件路径'
  // template: `组件模板字符串`
  templateUrl: './app.component.html',
  // 关联组件样式文件
  // styleUrls: ['组件样式文件路径']
  // styles: [`样式组件`]
  styles: [`
    input.ng-touched.ng-invalid {
      border: 1px solid red
    }
  `]
})

// 基础
// export class AppComponent implements AfterViewInit {
//   @ViewChild('paragraph') paragraph: ElementRef<HTMLParagraphElement> | undefined
//   @ViewChildren('items') items: QueryList<HTMLLIElement> | undefined
//   onClick() {
//     console.log()
//   }

//   ngAfterViewInit() {
//     console.log(this.items?.toArray())
//   }
//   username: string = ''
//   setData () {
//     this.username = 'hello'
//   }
//   getData () {
//     console.log(this.username)
//   }
//   task: Task = {
//     person: {
//       name: 'zhangsan'
//     }
//   }
//   list: List[] = [
//     {id: 0, name: '1', age: 12},
//     {id: 1, name: '2', age: 13},
//     {id: 2, name: '3', age: 14},
//     {id: 3, name: '4', age: 15},
//     {id: 4, name: '5', age: 16},
//   ]
//   identify (index: number, item: List) {
//     return item.id
//   }
// }

// 进阶
export class AppComponent {
  // date: Date = new Date()
  // momey: number = 345974
  // title: string = 'angular-TEST'
  // test = {
  //   person: {
  //     name: 'zhangsan',
  //     age: 25
  //   }
  // }
  // paragraph: string = '测试测试测试测试测试测试测试测试测试'
  // getData (event: string) {
  //   console.log(event)
  // }
  // name = 'zhangsan'
  // age = '0'
  // person = {
  //   name: 'lisi'
  // }
  // onChangeName () {
  //   this.name = 'lisi'
  //   this.age = '20'
  //   this.person.name = 'zhangsan'
  // }
  // constructor (private testService: TestService) {
  //   console.log(this.testService.test)
  // }
  contactForm: FormGroup = new FormGroup({
    name: new FormGroup({
      username: new FormControl('xxx')
    }),
    phone: new FormControl(123)
  })
  onSubmit () {
    console.log(this.contactForm.value.name.username) // xxx
    console.log(this.contactForm.get(["name", "username"])?.value) // xxx
  }
}

// class MailService {}

// // 创建注入器，接收一个数组，数组的元素是类
// const injector = ReflectiveInjector.resolveAndCreate([MailService])
// // 创建子级注入器 但不传递类
// const childInjector = injector.resolveAndCreateChild([])

// // 根据 get 方法获取类的实例对象
// // 从同一个注入器中获取的实例对象都是相同的
// const mailService1 = injector.get(MailService)
// const mailService2 = injector.get(MailService)
// // 当前子级注入器中没找到对应的类 会向父级注入器查找
// const mailService3 = childInjector.get(MailService)

// console.log(mailService1 === mailService2) // true
// console.log(mailService1 === mailService3) // true

class MailService {}

// 完整写法 如果两个值相同可以写成 [MailService]
const injector = ReflectiveInjector.resolveAndCreate([
  { provide: 'mail', useValue: Object.freeze({
    name: 'zhangsan'
  })}
])

const mailService = injector.get('mail')
// 对象被冻结 无法修改 会报错
// mailService.name = 'lisi'

console.log(mailService) // zhangsan